<template>
  <el-dialog :title="dialogProps.title" :visible.sync="dialogProps.visible" width='600px'>
        <el-form :model="form" ref='form' :rules="rules" align='left'  size='small'>
              <el-tabs  >
                    <el-tab-pane label="基本信息" name="first" >基本信息</el-tab-pane>
              </el-tabs>

              <el-form-item      label="名称"      :label-width="formLabelWidth" prop="name" align='left'>
                    <el-input v-model.trim="form.name"   placeholder='请输入名称'></el-input>
              </el-form-item>
              <el-form-item      label="描述"      :label-width="formLabelWidth" prop="desc" align='left'>
                    <el-input v-model.trim="form.desc"    placeholder='请输入描述'></el-input>
              </el-form-item>


              <el-tabs >
                    <el-tab-pane label="本金规则" name="second">本金规则</el-tab-pane>
              </el-tabs>

              <el-form-item      label="一次性返还" :label-width="formLabelWidth" align='left' prop='onceReturn'  >
                    <el-switch v-model.trim="form.onceReturn" active-value="1" inactive-value="0" @change='(val)=>onceChange(val,1)' ></el-switch>
              </el-form-item>
              <el-form-item      label="返还次数"   :label-width="formLabelWidth" align='left' :prop='isRequired ? "returnNum" : " " ' :rules="{required:isRequired,message:isRequired ? '请填入返回次数' : '123'}" >
                    <el-input v-model.trim="form.returnNum"    placeholder='请输入返还次数' :disabled='this.form.onceReturn==1' ></el-input>
              </el-form-item>
              

              <el-tabs >
                    <el-tab-pane label="付息规则" name="third">付息规则</el-tab-pane>
              </el-tabs>

              <el-form-item      label="一次性付息" :label-width="formLabelWidth" align='left' prop='oncePay'>
                    <el-switch v-model.trim="form.oncePay" active-value="1" inactive-value="0"  @change='(val)=>onceChange(val,2)' ></el-switch>
              </el-form-item>
              <el-form-item      label="付息日期"   :label-width="formLabelWidth" align='left' prop='payZhouqi'>
                    <el-radio-group v-model.trim="form.payZhouqi" :disabled='form.oncePay == 1' >
                          <el-radio label="1" >自然周期</el-radio>
                          <el-radio label="2" >计费周期</el-radio>
                    </el-radio-group>
              </el-form-item>
              <el-form-item      label="付息间隔"   :label-width="formLabelWidth" align='left' prop='gapTime' class='inline-block' :rules="{required:isgapRequired,message:isgapRequired ? '请填入付息间隔' : ''}">
                    <el-input v-model.trim="form.gapTime"  class='gapTime' :disabled='form.oncePay == 1'  ></el-input>
              </el-form-item>
              <el-form-item prop='chooseTime' class='inline-block'>
                    <el-select v-model.trim="form.chooseTime" placeholder="请选择" class='w100' >
                          <el-option  :disabled='form.oncePay == 1'
                            v-for="item in chooseTime"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                    </el-select>
              </el-form-item>
              <el-form-item      label="利率类型"   :label-width="formLabelWidth" align='left'  prop='rateType'>
                    <el-radio-group v-model.trim="form.rateType">
                          <el-radio label="1">年化</el-radio>
                          <el-radio label="2">固定一次性</el-radio>
                    </el-radio-group>
              </el-form-item>
              <el-form-item      label="计息基数"   :label-width="formLabelWidth" align='left'  prop='rateBasic'>
                    <el-radio-group v-model.trim="form.rateBasic" >
                          <el-radio label="1" >全部本金</el-radio>
                          <el-radio label="2" >剩余本金</el-radio>
                    </el-radio-group>
              </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
              <el-button @click="close()">取 消</el-button>
              <el-button type="primary" @click="submit('form')">确 定</el-button>
        </div>
  </el-dialog>
</template>

<script charset="utf-8" type="text/javascript">
import { saveDuifu ,modifyDuifu } from '@/api/settings/duifu' 
export default {
  name: 'duifuEdit',
  data() {
    return {
      loading: false,
      //dialogo基本信息  显示隐藏状态  title 
      dialogProps: {
        visible: false,
        action: '',
        title: ''
      },
      isRequired:true,
      isgapRequired:true,
      
      //表单label向外marin
      formLabelWidth: '120px',
      //表单验证规则
      rules:{
        name:[
          { required:true ,message:'请输入名称'}
        ]
      },
      
      //选择 月 年
      chooseTime:[
        {label:'日',value:'1'},
        {label:'周',value:'2'},
        {label:'月',value:'3'},
        {label:'季度',value:'4'},
        {label:'半年',value:'5'},
        {label:'年',value:'6'},
      ],
      if_onceReturn:false,//一次性返还 禁用多次次数输入
      if_oncePay:false,//一次付息 禁用多次输入
      iscreate:true,//是否 新建


      //绑定表单数据
      form: {
          name: '',//名称
          desc: '',//描述

          onceReturn:'0',//是否一次性返还
          returnNum:'',

          oncePay:'0',//是否一次性付息
          payZhouqi:'1',//付息日期
          
          gapTime:"",
          chooseTime:'1',//付息 间隔单位
          

          rateType:'1',//利率类型
          rateBasic:'1'//计息基数
      },
    }
  },
  created(){
    
  },
  methods: {
    //提交
    submit(formName) {
      let that=this;
      this.loading = true
      //先验证表达
      this.$refs[formName].validate(valid => {
          //通过验证后
          if (valid) {
              //新增url
              if(this.iscreate){
                  saveDuifu(this.form)
                    .then(response => {
                              this.loading = false
                     
                              this.$message({type:'success',message:response.data.msg})
                              this.dialogProps.visible = false
                              this.$emit('save-finished')
                    })
                    .catch(error => {
                              this.loading = false
                              that.outputError(error)
                    })
              }
              //修改编辑url
              else{
                  modifyDuifu(this.form).then(response => {
                              this.loading = false
                              this.$message({type:'success',message:response.data.msg})

                              this.dialogProps.visible = false
                              this.$emit('save-finished')
                        })
                        .catch(error => {
                              this.loading = false
                              that.outputError(error)
                        })
              }
                    
          } 
          else {
            return false;
          }
      });

      
    },
    //一次性返还
    onceChange(val,num){
      if( num == '1'){
          if(val == '1'){
            this.form.returnNum=''
            this.isRequired=false
            this.$refs.form.clearValidate(['returnNum'])
          }
          else{
            this.isRequired=true
          }
      }
      if( num == '2'){
          if(val == '1'){
            this.form.gapTime=''
            this.form.payZhouqi=''
            this.form.chooseTime=''
            this.isgapRequired=false
            this.$refs.form.clearValidate(['gapTime'])
          }
          else{
            this.form.payZhouqi='1'
            this.form.chooseTime='1'
            this.isgapRequired=true
          }
      }
      
    },
   close(){
      this.dialogProps.visible = false; 
       this.$refs.form.resetFields()
   }
    
  },
  mounted: function() {
    this.$nextTick(() => {
      this.$on('openEditDialog', function(data) {
         for(let key in data){
          if( key == 'payIntervalUnit' ){
            if(data[key] == null){
                data[key]='1'
            }
          }
         };
         console.log(data);
        //data.map((v)=>{console.log(v)})
        [this.form.code,this.form.name,this.form.desc] = [data.code,data.name,data.description];
        [this.form.onceReturn,this.form.returnNum] = [String(data.oneTimeReturn),data.returnNum];
        [this.form.oncePay,this.form.payZhouqi,this.form.gapTime,this.form.chooseTime,this.form.rateType,this.form.rateBasic] = [String(data.oneTimePay),String(data.payDateType),data.payIntervalNum,String(data.payIntervalUnit),String(data.interestRateType),String(data.interestBaseType)]
        
        if(this.form.oncePay == '1'){
            this.isgapRequired=false
        }
        if(this.form.onceReturn == '1'){
            this.isRequired=false
        }

        this.dialogProps.action = 'edit'
        this.dialogProps.title = '编辑兑付规则'
        this.dialogProps.visible = true
        this.iscreate=false
      })
      this.$on('openAddDialog', function() {
        this.form = {
            name: '',//名称
            desc: '',//描述

            onceReturn:'0',//是否一次性返还
            returnNum:'',

            oncePay:'0',//是否一次性付息
            payZhouqi:'1',//付息日期
            
            gapTime:"",
            chooseTime:'1',//付息 间隔单位
            

            rateType:'1',//利率类型
            rateBasic:'1'//计息基数
        };
        this.isgapRequired=true
        this.isRequired=true

        this.resetForm('form')
        this.dialogProps.action = 'add'
        this.dialogProps.title = '新增兑付规则'
        
        this.dialogProps.visible = true
        this.iscreate=true
      })
    })
  },
  components:{
    
  }
}
</script>

<style  scoped>

.el-input{width:350px;}
.gapTime{width: 100px;} 

.el-select>.el-input{width: 100px;}
</style>


